<!-- 这样样例主要是vue函数的使用 -->
<html>

<head>
    <style>
        img {
            width:500px;
            height:250px;
        }
        .active{
            color:red;
        }
        
    </style>
    
</head>

<body>
    <div id="app">
        <div>{{number}}</div>
        <!-- 动态绑定属性 -->
        <img v-bind:src="img_src" alt="">
        <!-- 语法糖 -->
        <a :href="baidu_src">百度</a>
        <!-- 使用v-bind实现点击变颜色 -->
        <!-- 对象语法 -->
        <ul>
            <!-- <a v-bind:class="my_active"> -->
                <!-- 绑定class时，{}中是{键：bool,键:bool} -->
            <a v-bind:class="{active:isActive,line:isLine}" v-on:click="changeColor" href="javascript:;" v-for="place in place_list">
                <li>{{place}}</li>
            </a>
        </ul>
        <!-- 也可以这样写,绑定的class过长时，可以写在methods中，注意这里要加上括号才行 -->
        <ul>
            <a v-bind:class="bindClasses(index)" v-on:click="changeColor(index)" href="javascript:;" v-for="(place,index) in place_list">
                <li>{{place}}</li>
            </a>
        </ul>
        <!-- 数组语法 -->
        <ul>
            <a :class="[active,line]" v-on:click="changeColor" href="javascript:;" v-for="place in place_list">
                <li>{{place}}</li>
            </a>
        </ul>
        <!-- 绑定style样式 -->
        <!-- 绑定style时，{}中的结果是{键：值，键：值} -->
        <!-- 对象语法 -->
        <div :style="bindStyle()">bind样式,对象语法</div>
        <!-- 数组语法 -->
        <div :style="[baseStyle,extraStyle]">bind样式，数组语法</div>
    </div>
    <script src="__STATIC__/plugins/vue/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            //声明数据
            data: {
                number: 0,
                img_src:'https://www.wuling.com/images-pc-carstyle/pc-car-01.png',
                baidu_src:'http://baidu.com',
                place_list:['成都','贵州','丽江','西塘'],
                isActive:true,
                isLine:false,
                active:'active',
                line:'line',
                clickIndex:0,
                fontSize:100,
                fontColor:'red',
                baseStyle:{background:'red'},
                extraStyle:{color:'blue'}
            },
            methods:{
                changeColor:function(index){
                    this.clickIndex = index
                    
                },
                bindClasses:function(index){
                    if(index == this.clickIndex){
                        return {active:this.isActive,line:this.isLine};
                    }else{
                        return {active:!this.isActive,line:!this.isLine};
                    }
                },
                bindStyle:function(){
                    return {'font-size':this.fontSize+'px','color':this.fontColor};
                }
            }
        })
    </script>
</body>

</html>